<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平滚动条多样式卡片展示</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            padding: 20px;
            color: #333;
        }

        .container {
            width: 100%;
            max-width: 1600px;
            text-align: center;
        }

        h1 {
            color: white;
            margin-bottom: 30px;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        /* 水平滚动条示例 */
        .horizontal-scroll-container {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-top: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .horizontal-scroll-container h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
        }

        .horizontal-scroll-content {
            display: flex;
            overflow-x: auto;
            padding: 10px 0;
            gap: 20px;
        }

        .horizontal-item {
            flex: 0 0 auto;
            width: 350px;
            height: 500px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            border: 1px solid #E0E0E0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /* 水平滚动条样式 */
        .horizontal-scroll-content::-webkit-scrollbar {
            height: 12px;
        }

        .horizontal-scroll-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 6px;
        }

        .horizontal-scroll-content::-webkit-scrollbar-thumb {
            background: linear-gradient(to right, #6a11cb, #2575fc);
            border-radius: 6px;
        }

        .horizontal-scroll-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(to right, #5a0db5, #1c68e6);
        }

        .card {
            scroll-snap-align: start;
            flex: 0 0 auto;
            border-radius: 16px;
            overflow: hidden;
            background: white;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
        }

        /* 图片卡片样式 */
        .card-image {
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .card:hover .card-image img {
            transform: scale(1.08);
        }

        .card-tag {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #ff6b6b;
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .card-content {
            width: 100%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            text-align: left;
        }

        .card h3 {
            margin-bottom: 12px;
            color: #2c3e50;
            font-size: 1.4rem;
        }

        .card p {
            color: #7f8c8d;
            margin-bottom: 15px;
            line-height: 1.5;
            flex-grow: 1;
        }

        .card-button {
            display: inline-block;
            padding: 10px 20px;
            background: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: background 0.3s ease;
            text-align: center;
        }

        .card-button:hover {
            background: #2980b9;
        }

        @media (max-width: 768px) {
            .card {
                width: 280px;
                height: 380px;
            }
        }

        /* 列表卡片样式 */
        .card-list {
            padding: 0;
            overflow: auto;
            max-height: 420px;
        }

        /* 渐变风格滚动条 */
        .card-list::-webkit-scrollbar {
            width: 10px;
        }

        .card-list::-webkit-scrollbar-track {
            background: #1a1a2e;
            border-radius: 5px;
        }

        .card-list::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #a1c4fd);
            border-radius: 5px;
            background-size: 400% 400%;
            animation: gradient 3s ease infinite;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .card-list-item {
            display: flex;
            align-items: center;
            padding: 3px 6px;
            border-bottom: 1px solid #f1f1f1;
            transition: background 0.2s ease;
        }

        .card-list-item:last-child {
            border-bottom: none;
        }

        .card-list-item:hover {
            background: #f9f9f9;
        }

        .list-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e3f2fd;
            border-radius: 50%;
            margin-right: 15px;
            color: #3498db;
        }

        .list-text {
            flex-grow: 1;
            text-align: left;
        }

        .list-text h4 {
            font-size: 1rem;
            color: #2c3e50;
            margin-bottom: 4px;
            padding: 3px;
        }

        .list-text h4.btn {
            cursor: pointer;
            background-color: #3498db;
            color: white;
        }

        .list-text h4.btn:hover,
        .list-text h4.btn:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
        }

        .list-text p {
            font-size: 0.85rem;
            color: #7f8c8d;
            margin: 0;
            padding: 2px;
        }

        .list-text input {
            font-size: 0.85rem;
            color: #7f8c8d;
            margin: 0;
            width: 100%;
        }

        .list-text select {
            font-size: 0.85rem;
            color: #7f8c8d;
            margin: 0;
            width: 100%;
        }

        /* JSON卡片样式 */
        .json-container {
            padding: 20px;
            background: #2c3e50;
            color: #fff;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            text-align: left;
            flex-grow: 1;
            overflow-y: auto;
            font-size: 0.85rem;
            line-height: 1.5;
        }

        .json-key {
            color: #e74c3c;
        }

        .json-string {
            color: #2ecc71;
        }

        .json-number {
            color: #3498db;
        }

        .json-boolean {
            color: #f39c12;
        }

        .btnDisabled {
            pointer-events: none;
            display: inline-block;
            box-shadow: inset -10px 10px 30px rgba(0, 0, 0, 0.4),
                offset-5px -5px 20px rgba(255, 255, 255, 0);
            background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 10%, transparent 50%);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 水平滚动条示例 -->
        <div class="horizontal-scroll-container">
            <h2>水平滚动条示例</h2>
            <div class="horizontal-scroll-content">

                <script>
                    // JSON卡片
                    class CardJSON {
                        constructor(options) {
                            this.options = { ...options };
                            this.container = document.getElementById(options.id);
                            this.init(this.options);
                        }
                        init(options) {
                            const card_content = document.createElement('div');
                            card_content.className = "card-content";
                            const h3 = document.createElement('h3');
                            h3.textContent = options.h3;
                            this.json_container = document.createElement('textarea');
                            this.json_container.className = "json-container";
                            this.json_container.value = JSON.stringify(options.json, null, 2);
                            card_content.append(h3);
                            card_content.append(this.json_container);
                            this.container.innerHTML = "";
                            this.container.append(card_content);
                        }
                    }

                    // 列表卡片
                    class CardList {
                        constructor(options) {
                            this.options = { ...options };
                            this.container = document.getElementById(options.id);
                            this.init(this.options);
                        }
                        init(options) {
                            const card_content = document.createElement('div');
                            card_content.className = "card-content";
                            const h3 = document.createElement('h3');
                            h3.textContent = options.h3;
                            this.card_list = document.createElement('div');
                            this.card_list.className = "card-list";
                            card_content.append(h3);
                            card_content.append(this.card_list);
                            this.container.innerHTML = "";
                            this.container.append(card_content);
                            this.list(options.items);
                        }
                        list(items, type = "p") {
                            items.forEach((item) => {
                                const card_list_item = document.createElement('div');
                                card_list_item.className = "card-list-item";
                                const list_text = document.createElement('div');
                                list_text.className = "list-text";
                                const h4 = document.createElement('h4');
                                h4.textContent = item.h4;
                                list_text.append(h4);
                                const p = document.createElement(type);
                                p.textContent = item.p;
                                list_text.append(p);
                                card_list_item.append(list_text);
                                this.card_list.append(card_list_item);
                            });
                        }
                    }

                    // 图片卡片
                    class CardImage {
                        constructor(options) {
                            this.options = { ...options };
                            this.container = document.getElementById(options.id);
                            this.init(this.options);
                        }
                        init(options) {
                            const card_image = document.createElement('div');
                            card_image.className = "card-image";
                            const image = document.createElement('img');
                            image.src = options.src;
                            image.alt = options.alt;
                            const card_tag = document.createElement('div');
                            card_tag.className = "card-tag";
                            card_tag.textContent = options.tag;
                            const card_content = document.createElement('div');
                            card_content.className = "card-content";
                            const h3 = document.createElement('h3');
                            h3.textContent = options.h3;
                            const p = document.createElement('p');
                            p.textContent = options.p;
                            const a = document.createElement('a');
                            a.className = "card-button";
                            a.textContent = options.a;
                            a.href = "#";
                            card_image.append(image);
                            card_image.append(card_tag);
                            card_content.append(h3);
                            card_content.append(p);
                            card_content.append(a);
                            this.container.innerHTML = "";
                            this.container.append(card_image);
                            this.container.append(card_content);
                        }
                    }
                </script>

                <div id="card-image" class="horizontal-item card">
                    <div class="card-image">
                        <img id="previewImg"
                            src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
                            alt="Education">
                        <div class="card-tag">OCR</div>
                    </div>
                    <div class="card-content">
                        <h3>使用方法</h3>
                        <p>点击这里，然后粘贴截图；或者拖动图片到这里。</p>
                        <!--a id="recognize-btn" class="card-button" onclick="uploadImage()" href="#">识别</a-->
                    </div>
                </div>
                <script>
                    class InputImage {
                        constructor() {
                            this.pasteArea = document.getElementById('card-image');
                            this.previewImg = document.getElementById('previewImg');
                            this.recognizeBtn = document.getElementById('recognize-btn');
                            this.blob = null;
                            this.recognizeText = null;
                            this.elementListener(this);
                        }
                        elementListener(someVariable) {
                            someVariable.pasteArea.addEventListener('paste', function (e) {
                                const items = (e.clipboardData || window.clipboardData).items;
                                for (let i = 0; i < items.length; i++) {
                                    if (items[i].type.indexOf('image') !== -1) {
                                        const blob = items[i].getAsFile();
                                        someVariable.handleImageFile(blob);
                                        someVariable.blobOcr(blob);
                                        break;
                                    }
                                }
                            });
                            someVariable.pasteArea.addEventListener('dragover', function (e) {
                                e.preventDefault();
                                someVariable.pasteArea.classList.add('dragover');
                            });
                            someVariable.pasteArea.addEventListener('dragleave', function () {
                                someVariable.pasteArea.classList.remove('dragover');
                            });
                            someVariable.pasteArea.addEventListener('drop', function (e) {
                                e.preventDefault();
                                someVariable.pasteArea.classList.remove('dragover');
                                const dt = e.dataTransfer;
                                const files = dt.files;
                                if (files.length) {
                                    const file = files[0];
                                    if (file.type.match('image.*')) {
                                        someVariable.handleImageFile(file);
                                        someVariable.blobOcr(file);
                                    } else {
                                        alert('请选择图片文件');
                                    }
                                }
                            });
                        }
                        handleImageFile(file) {
                            let imageFile = file;
                            const someVariable = this;
                            const reader = new FileReader();
                            reader.onload = (e) => {
                                someVariable.previewImg.src = e.target.result;
                            };
                            reader.readAsDataURL(file);
                        }
                        async blobOcr(imageFile) {
                            if (!imageFile) return;

                            const formData = new FormData();
                            formData.append('image', imageFile);
                            const recognizeText = document.getElementById("recognize-text");

                            try {
                                const response = await fetch('/ocr', {
                                    method: 'POST',
                                    body: formData
                                });

                                const result = await response.json();
                                if (result.success) {
                                    //console.log(result)
                                    this.recognizeResult = result;
                                    this.recognizeText = result.text;
                                    //ollamaChatContent.push({ role: "user", content: this.recognizeText });
                                    options_card_list.items = [];
                                    options_card_list.h3 = "识别结果"
                                    result.text.split("\n").forEach((item, index) => {
                                        if (item) options_card_list.items.push({ h4: index, p: item });
                                    });
                                    OCL.init(options_card_list);
                                } else {
                                    recognizeText.value = JSON.stringify({ "识别失败": result.error }, null, 2);
                                }
                            } catch (error) {
                                recognizeText.value = JSON.stringify({ "发生错误": error.message }, null, 2);
                            } finally {
                                console.log("识别图片中的文字");
                            }
                        }
                    }
                    const II = new InputImage();
                </script>
                <!-- 列表卡片 -->
                <div id="card-list" class="horizontal-item card" onclick="copyOCR()"></div>
                <script>
                    const options_card_list = {
                        id: "card-list",
                        h3: "功能列表",
                        items: [
                            { h4: "OCR", p: "粘贴截图，或者拖动图片。" },
                            { h4: "系统提示词", p: "按照大模型的系统提示词编写。" },
                            { h4: "参数配置", p: "与大模型相关的参数配置。" }
                        ]
                    };
                    const OCL = new CardList(options_card_list);
                </script>


                <div class="horizontal-item card">
                    <div class="card-content">
                        <h3>系统提示词</h3>
                        <textarea id="system-prompt" class="json-container" placeholder="在这里输入大模型的系统关键词"></textarea>
                    </div>
                </div>
                <script>
                    const system_prompt = document.getElementById('system-prompt');
                    system_prompt.value = localStorage.getItem("system-prompt") || "你是一个简洁的AI智能助手。";
                    system_prompt.addEventListener("change", function (event) {
                        localStorage.setItem('system-prompt', event.target.value);
                        //ollamaChatContent[0].content = localStorage.getItem("system-prompt");
                    })
                    const ollamaChatContent = [{ role: "system", content: system_prompt.value }];
                </script>

                <!-- 列表卡片 -->
                <div class="horizontal-item card">
                    <div class="card-content">
                        <h3>参数及功能</h3>
                        <div class="card-list">
                            <div class="card-list-item">
                                <div class="list-text">
                                    <h4>Ollama URL</h4>
                                    <input type="text" id="api-tags-url" placeholder="ollama api tags url">
                                </div>
                            </div>
                            <script>
                                const api_tags_url = document.getElementById('api-tags-url');
                                api_tags_url.value = localStorage.getItem("api-tags-url") || "http://localhost:11434";
                                api_tags_url.addEventListener("change", function (event) {
                                    localStorage.setItem("api-tags-url", event.target.value);
                                })
                            </script>
                            <div class="card-list-item">
                                <div class="list-text">
                                    <h4>Ollama 模型</h4>
                                    <select id="ollama-models-name"></select>
                                </div>
                            </div>
                            <script>
                                const ollama_model_name = document.getElementById('ollama-models-name');
                                async function fetchTags() {
                                    try {
                                        const response = await fetch(api_tags_url.value + "/api/tags");
                                        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                                        const data = await response.json();
                                        data.models.forEach(model => {
                                            const option = document.createElement('option');
                                            if (model.name === "qwen3:1.7b") {
                                                option.selected = true;  // 设置选中状态
                                            }
                                            option.value = model.name;
                                            option.textContent = `模型：${model.name}，大小：${Math.floor(model.size / 1024 / 1024)} Mb`;
                                            ollama_model_name.append(option);
                                        });
                                    } catch (error) {
                                        console.error('Error fetching data:', error);
                                    }
                                }
                                fetchTags();
                            </script>
                            <div class="card-list-item">
                                <div class="list-text">
                                    <h4 id="ollamaStreamChatBtn" class="btn" onclick="ollamaStreamChat()">Ollama Chat
                                    </h4>
                                    <p>点击进行Ollama聊天</p>
                                </div>
                            </div>
                            <script>
                                const ollama_chat_result = document.getElementById("ollama-chat-result");
                                const ollamaStreamChatBtn = document.getElementById("ollamaStreamChatBtn");
                                let ollamaData = null;
                                async function ollamaStreamChat() {
                                    if (II.recognizeText === null) {
                                        showNotification('没有OCR识别的内容', 'error');
                                        return false;
                                    }
                                    const payload = {
                                        model: ollama_model_name.value,
                                        messages: [
                                            { role: "system", content: system_prompt.value },
                                            { role: "user", content: II.recognizeResult.text }
                                        ],
                                        stream: true
                                    };
                                    ollamaStreamChatBtn.classList.add("btnDisabled");
                                    document.getElementById("ollama-chat-result").value = "";
                                    const response = await fetch(api_tags_url.value + "/api/chat", {
                                        method: "POST",
                                        headers: {
                                            "Content-Type": "application/json",
                                            "Accept": "text/event-stream"
                                        },
                                        body: JSON.stringify(payload)
                                    });
                                    const reader = response.body.getReader();
                                    const decoder = new TextDecoder();
                                    let buffer = "";
                                    let messages = "";
                                    while (true) {
                                        const { done, value } = await reader.read();
                                        if (done) break;
                                        buffer += decoder.decode(value, { stream: true });
                                        const chunks = buffer.split("\n");
                                        buffer = chunks.pop();
                                        for (const chunk of chunks) {
                                            if (chunk.trim() === "") continue;
                                            try {
                                                const data = JSON.parse(chunk);
                                                messages += data.message.content;
                                                document.getElementById("ollama-chat-result").value += data.message.content;
                                                document.getElementById("ollama-chat-result").scrollTop = document.getElementById("ollama-chat-result").scrollHeight;
                                            } catch (e) {
                                                console.error("Failed to parse chunk:", chunk);
                                            }
                                        }
                                    }
                                    //ollamaChatContent.push({ role: "system", content: messages });
                                    ollamaStreamChatBtn.classList.remove("btnDisabled");
                                    document.getElementById("ollama-chat-result").scrollTop = document.getElementById("ollama-chat-result").scrollHeight;
                                    ollamaData = {
                                        "filename": II.recognizeResult.filename,
                                        "model": ollama_model_name.value,
                                        "ai": messages,
                                        "messages": [...payload.messages]
                                    }
                                    uploadOCROllamaResult()
                                }
                            </script>
                            <div class="card-list-item">
                                <div class="list-text">
                                    <h4 id="uploadOCROllamaBtn" class="btn" onclick="uploadOCROllamaResult()">保存数据</h4>
                                    <p>点击上传OCR结果和Ollama结果</p>
                                </div>
                            </div>
                            <script>
                                const uploadOCROllamaBtn = document.getElementById("uploadOCROllamaBtn");
                                async function uploadOCROllamaResult() {
                                    uploadOCROllamaBtn.classList.add("btnDisabled");
                                    try {
                                        // 发送POST请求到Flask后端
                                        const response = await fetch('/upload_db', {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                            },
                                            body: JSON.stringify(ollamaData)
                                        });

                                        if (!response.ok) {
                                            throw new Error('网络响应不正常');
                                        }

                                        const result = await response.json();
                                        document.getElementById("ollama-chat-result").value += "\n\n" + JSON.stringify(result, null, 2);
                                        document.getElementById("ollama-chat-result").scrollTop = document.getElementById("ollama-chat-result").scrollHeight;
                                    } catch (error) {
                                        console.error('错误:', error);
                                        alert('上传失败: ' + error.message);
                                    }
                                    uploadOCROllamaBtn.classList.remove("btnDisabled");
                                }
                            </script>
                        </div>
                    </div>
                </div>

                <div id="card-json-2" class="horizontal-item card">
                    <div class="card-content">
                        <h3 onclick="copyOllama()">Ollama Text</h3>
                        <textarea id="ollama-chat-result" class="json-container"></textarea>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <!-- 放大预览的模态框 -->
    <style>
        /* 放大预览的模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            padding-top: 100px;
            background-color: rgba(0, 0, 0, 0.9);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            margin: auto;
            display: block;
            max-width: 90%;
        }

        .modal-close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }

        .modal-close:hover,
        .modal-close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <div id="imageModal" class="modal">
        <span class="modal-close">&times;</span>
        <img class="modal-content" id="expandedImg">
    </div>
    <script>
        class PreviewImage {
            constructor() {
                this.modal = document.getElementById('imageModal');
                this.modalImg = document.getElementById('expandedImg');
                this.previewImg = document.getElementById('previewImg');
                this.closeBtn = document.getElementsByClassName('modal-close')[0];
                this.init(this);
            }
            init(someVariable) {
                this.previewImg.onclick = function (event) { // 点击图片显示模态框
                    someVariable.modal.style.display = 'block';
                    someVariable.modalImg.src = event.target.src;
                }
                this.closeBtn.onclick = function () { // 点击关闭按钮隐藏模态框
                    someVariable.modal.style.display = 'none';
                }
                this.modal.onclick = function (event) { // 点击模态框背景也隐藏模态框
                    if (event.target === someVariable.modal) {
                        someVariable.modal.style.display = 'none';
                    }
                }
                document.onkeydown = function (event) { // 按ESC键关闭模态框
                    if (event.key === 'Escape' && someVariable.modal.style.display === 'block') {
                        someVariable.modal.style.display = 'none';
                    }
                };
            }
        }
        const PI = new PreviewImage();
    </script>

    <!-- 显示通知的模态框 -->
    <style>
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 6px;
            color: white;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transform: translateX(150%);
            transition: transform 0.3s ease;
            z-index: 1000;
            display: flex;
            align-items: center;
        }

        .notification.success {
            background-color: #2ecc71;
        }

        .notification.error {
            background-color: #e74c3c;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
    </style>
    <div class="notification" id="notification"></div>
    <script>
        function copyOCR() {
            copyToClipboard(II.recognizeText);
        }
        function copyOllama() {
            copyToClipboard(ollama_chat_result.value);
        }
        // 通用复制函数
        async function copyToClipboard(content, successMsg = '内容已复制到剪贴板！', errorMsg = '复制失败，请手动复制') {
            try {
                let textToCopy;

                // 判断content是元素ID还是直接文本
                if (typeof content === null) {
                    showNotification('复制失败，没有识别出的内容', 'error');
                    return false;
                } else {
                    // 否则直接使用content
                    textToCopy = content;
                }

                // 使用现代Clipboard API
                if (navigator.clipboard && window.isSecureContext) {
                    await navigator.clipboard.writeText(textToCopy);
                } else {
                    // 降级方案：使用document.execCommand
                    const textArea = document.createElement('textarea');
                    textArea.value = textToCopy;
                    textArea.style.position = 'fixed';
                    textArea.style.opacity = '0';
                    document.body.appendChild(textArea);
                    textArea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textArea);
                }

                // 显示成功消息
                showNotification(successMsg, 'success');
                return true;
            } catch (err) {
                console.error('复制失败:', err);
                showNotification(errorMsg, 'error');
                return false;
            }
        }

        // 显示通知函数
        function showNotification(message, type) {
            const notification = document.getElementById('notification');
            const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';

            notification.innerHTML = `<i class="fas ${icon}"></i> ${message}`;
            notification.className = `notification ${type}`;
            notification.classList.add('show');

            // 3秒后隐藏通知
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
    </script>
</body>

</html>